<template>
  <div class="page">
    <el-pagination
      :current-page="currentPage4"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, pager, jumper"
      :total="400">
    </el-pagination>
  </div>
</template>

<script>
import Vue from 'vue'
import {Pagination} from 'element-ui'
Vue.use(Pagination)

export default {
  name:'Page',
  data() {
    return {
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4
    }
  }
}
</script>

<style>
.el-pagination{
  margin-top: 40px;
  color: #666;
  font-size: 16px;
}
.el-pagination__total {
  margin-right: 800px;
}
.el-pagination__editor.el-input {
    width: auto;
}
.el-pager li ,.el-pagination__editor.el-input .el-input__inner{
  width: 40px;
  height: 40px;
  background: #FFF;
  line-height: 40px;
  text-align: center;
  border-radius: 10px;
  border: 1px solid #E9E9E9;
  margin-left: 10px;
}

.el-pager li.active {
  color: #fff;
  background: #E48B2C;
}

.el-pager li:hover {
  color: #fff;
  background: #E48B2C;
}

</style>
